<template>
  <div class="workOrderRecord">
    <div>
      <table class="examInApprox">
        <caption>历史记录</caption>
        <tr>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
        <template v-for="(recordListItem,index) in workApplyData.data.workApproveOpinions">
          <tr>
            <td class="td1">
              <div class="imgs">
                <img class="imgUser" src="../../../assets/static/image/user2.png" alt="办理人"/><br/>
                <span>{{recordListItem.approveName}}</span><br/>
                <div class="ericLine"></div>
                <img class="imgOk" src="../../../assets/static/image/ok.png" alt="已办理"/><br/>
                <template v-if="index !== workApplyData.data.workApproveOpinions.length -1">
                  <div class="ericLine1"></div>
                </template>

              </div>

            </td>
            <td class="td2">
              <div class="record">
                <span class="decision">{{ getNodeName(recordListItem.nodeId) }}</span><br/>
                <hr/>
                <span class="examInApprox_icon">所在部门：</span><span>{{ recordListItem.deptName }}</span><br/>
                <span>提交时间：</span><span>{{ recordListItem.approveTime }}</span><br/>
                <hr/>
                <span>提交决策：</span><span>{{ recordListItem.decision }}</span><br/>
                <span>提交意见：</span><span>{{ recordListItem.opinion }}</span><br/>
              </div>

            </td>
          </tr>

        </template>

      </table>



    </div>
  </div>
</template>

<script>
/**
 * 节点id对应节点名称map
 */
const CHAPTER_NODE_NAME_MAP = {
  "draft" :"拟稿",
  "zbsj" : "书记审批",
  "zsdwjbr" : "直属党委经办人办理",
  "zsdwfzr" : "直属党委负责人审批",
  "_EOF" : "处理完成"
}
export default {
  name: "WorkOrderRecord",
  props: ["workApplyData"],
  methods: {
    /**
     * 根据节点id获取节点名
     * @param nodeId 节点id
     * @returns 节点名
     */
    getNodeName(nodeId) {
      return CHAPTER_NODE_NAME_MAP[nodeId];
    }
  }
}
</script>

<style type="text/css">

.workOrderRecord {
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 100;
  height: 41em;
  overflow-y: auto;
  scroll-behavior: smooth;
  top: 110px;
  width: 100%;
  padding-bottom: 3em;
}

.workOrderRecord hr {
  border: none;
  border-bottom: 1px solid #DaDaDa;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
}

.examInApprox caption {
  display: none;
}

.workOrderRecord .examInApprox {
  border: 0 solid red;
}

.examInApprox tr:first-of-type {
  display: none;
}

.examInApprox .td1 {
  width: 30%;
}

.imgs {
  width: 40%;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5em;
}

.imgs .ericLine {
  background-color: #dadada;
  height: 20px;
  width: 2px;
  margin: 3px auto;
}

.imgs .ericLine1 {
  background-color: #dadada;
  height: 40px;
  width: 2px;
  margin: 3px auto;
}



.imgUser,.imgOk {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}



.record:before{
  content: '';
  position: absolute;
  background-color: #fff;
  width: 15px;
  height: 15px;
  transform: rotateZ(45deg);
  left: 129px;
  margin-top: 47px;
}

.examInApprox .td2 {
  vertical-align: top;
  width: 57%;
}

.examInApprox .td2 .record {
  line-height: 1.5em;
  padding: 1em;
  box-shadow: 0 0 23px rgb(145 43 43 / 12%);
  border-radius: 0.4em;
  margin-right: 8px;
}

.examInApprox .td2 .decision {
  color: red;
  font-size: 1.2em;
}

</style>

